<template>
    <div>
        <div class="row">
            <h3 class="bolder red center">
                <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
                <router-link to="/business/course" class="pink"> {{course.name}}</router-link>
            </h3>
        </div>

        <div class="row">
            <div id="content"></div>
        </div>
        <div class="row">
            <p>
                <button class="btn btn-white btn-default btn-round" @click="saveContent()">
                    <i class="ace-icon fa fa-save blue"></i>
                    保存
                </button>
                &nbsp;
                <button class="btn btn-white btn-danger btn-round" @click="deleteById()">
                    <i class="ace-icon fa fa-remove red"></i>
                    删除
                </button>
                &nbsp;
                <button class="btn btn-white btn-default btn-round" @click="openFileManageModal()">
                    <i class="ace-icon fa fa-file red"></i>
                    文件管理
                </button>
                &nbsp;
                <button class="btn btn-white btn-default btn-round" @click="toCourse()">
                    <i class="ace-icon fa fa-arrow-left red"></i>
                    返回
                </button>


            </p>
        </div>
        <div class="row center">
            <label class="label">{{saveContentLabel}}</label>
        </div>
        <!--文件管理模态框-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div style="width: 80%;height: 80%" class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="border-color: #aa160e;background-color: lightskyblue">
                        <h4 class="modal-title grey bolder center"
                        >文件管理</h4>
                    </div>
                    <div class="modal-body">
                        <div class="">
                            <BigFile v-bind:inputId="'content-file-upload'"
                                  v-bind:text="'上传文件'"
                                  v-bind:suffixs="['jpg', 'jpeg', 'png', 'mp4']"
                                  v-bind:use="FILE_USE.COURSE.key"
                                  v-bind:afterUpload="afterUploadContentFile">
                            </BigFile>
                            <br>
                            <table id="file-table" class="table  table-bordered table-hover">
                                <thead>
                                <tr >
                                    <th class="center">名称</th>
                                    <th class="center">地址</th>
                                    <th class="center">大小</th>
                                    <th class="center">操作</th>
                                </tr>
                                </thead>

                                <tbody>
                                <tr v-for="(f, i) in files" v-bind:key="f.id">
                                    <td class="center">{{f.name}}</td>
                                    <td class="center">
                                      <span  v-bind:id="'copyContent' + f.id">{{f.url}}</span>
                                      &nbsp;
                                      <button class="copyBtn"  v-bind:data-clipboard-target="'#copyContent' + f.id">复制</button>
                                    </td>
                                    <td class="center">{{f.size | formatFileSize}}</td>
                                    <td class="center">
                                        <button v-on:click="delFile(f)"
                                                class="btn btn-white btn-xs btn-warning btn-round">
                                            <i class="ace-icon fa fa-times red2"></i>
                                            删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    import BigFile from "../../components/big-file"

    export default {
        name: "courseContent",
        components: {BigFile},
        data: function () {
            return {
                courseContent: {},
                modalTitleArr: {
                    insert: "新增课程-内容",
                    update: "修改课程-内容"
                },
                modalTitle: "",
                course: {},
                saveContentLabel: "",
                saveContentInterval: {},
                FILE_USE: FILE_USE,
                files: [],
            }
        },
        destroyed: function () {
            let _this = this;
            console.log("组件销毁");
            clearInterval(_this.saveContentInterval);
        },
        mounted: function () {
            let _this = this;
            _this.getCourse();
            _this.initSummernote();
        },
        methods: {
            /*删除课程文件*/
            delFile(file) {
                let _this = this;
                Confirm.show("", () => {
                    Loading.show();
                    _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/courseContentFile/deleteById/' + file.id)
                        .then((response) => {
                            if (response.data.success) {
                                Toast.success(response.data.message);
                                _this.listCourseContentFile();
                            } else {
                                Toast.error(response.data.message);
                            }
                            Loading.hide();
                        });
                })

            },
            /*查询课程文件列表*/
            listCourseContentFile() {
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/courseContentFile/list/' + _this.course.id)
                    .then((response) => {
                        if (response.data.success) {
                            _this.files = response.data.data;
                          //初始化 ClipboardJS
                          var clipboard = new ClipboardJS('.copyBtn');
                          clipboard.on('success',function(e){
                            e.clearSelection();
                            Toast.success('复制成功');
                          });
                        }
                    });
            },
            /*上传完文件后*/
            afterUploadContentFile(data) {
                let _this = this;
                let fileDto = data.data;
                let courseContentFileDto = {};
                courseContentFileDto.courseId = _this.course.id;
                courseContentFileDto.url = fileDto.path;
                courseContentFileDto.name = fileDto.name;
                courseContentFileDto.size = fileDto.size;
                //保存到course-content-file中
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/courseContentFile/save', courseContentFileDto).then((response) => {
                    _this.listCourseContentFile();
                });
            },
            /*打开文件管理模态框*/
            openFileManageModal() {
                $("#myModal").modal({backdrop: 'static'});
                $("#myModal").modal("show");
                let _this = this;
                _this.listCourseContentFile();

            },
            /*返回课程*/
            toCourse() {
                let _this = this;
                _this.$router.push("/business/course");
            },
            /*获取课程信息*/
            getCourse() {
                let _this = this;
                _this.course = SessionStorage.get(SESSION_KEY_COURSE) || {};
                if (Tool.isEmpty(_this.course)) {
                    _this.$router.push("/welcome");
                }
            },

            /*初始化富文本*/
            initSummernote() {
                let _this = this;
                $("#content").summernote({
                    focus: true,
                    lang: 'zh-CN',// 语言
                    height: 600, // 高度
                    minHeight: 300, // 最小高度
                    maxHeight: 600, // 最小高度
                    placeholder: '请输入文章内容',

                });
                $("#myModal2").modal({backdrop: 'static'});
                $("#myModal2").modal("show");
                //清空富文本的内容
                $("#content").summernote('code', '');
                _this.saveContentLabel = "";
                //加载课程内容
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/courseContent/findById/' + _this.course.id).then((response) => {
                    _this.courseContent = response.data.data || {};
                    $("#content").summernote('code', _this.courseContent.content);
                    // 定时自动保存
                    _this.saveContentInterval = setInterval(function () {
                        _this.saveContent();
                    }, 5000);
                });

            },
            /**
             * 保存内容
             */
            saveContent() {
                let _this = this;
                let content = $("#content").summernote("code");
                if (content === _this.courseContent.content) {
                    return;
                }
                _this.courseContent.content = content;
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/courseContent/save', {
                    id: _this.course.id,
                    content: content
                }).then((response) => {
                    let resp = response.data;
                    if (resp.success) {
                        // Toast.success("内容保存成功");
                        // let now = Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
                        let now = Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
                        _this.saveContentLabel = "最后保存时间：" + now;
                        console.log()
                    }
                });
            },
            /*删除课程-内容*/
            deleteById() {
                let _this = this;
                /*删除提示框*/
                Confirm.show("", () => {
                    _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/courseContent/deleteById/' + _this.course.id).then((response) => {
                        if (response.data.success) {
                            Toast.success(response.data.message);
                            _this.$router.push("/business/course");
                        } else {
                            Toast.error(response.data.message);
                        }
                    })
                });
            }
        }
    }
</script>
